<template>
  <view class="chat-container">
    <!-- 顶部用户信息栏 -->
    <view class="user-info">
      <view class="user-name">李某某</view>
    </view>

    <!-- 顶部操作栏 -->
    <view class="action-top">
      <button class="action-button" @click="showContactPopup = true">
        <uni-icons type="phone" size="21" color="#9A9AFF" class="icon"></uni-icons>
        <text class="button-text">换电话/微信</text>
      </button>
      <button class="action-button primary" @click="scheduleInterview">
        <uni-icons type="staff" size="21" color="#9A9AFF" class="icon"></uni-icons>
        <text class="button-text">约面试</text>
      </button>
      <button class="action-button danger" @click="showRejectPopup = true">
        <uni-icons type="close" size="21" color="#FD5C60" class="icon"></uni-icons>
        <text class="button-text">不合适</text>
      </button>
    </view>
	<!-- 自定义弹窗组件 -->
	    <ContactPopup :visible.sync="showContactPopup" @select="handleContactSelect" />
		
	 <!-- 不合适原因弹窗 -->
	    <view class="reject-popup" v-if="showRejectPopup">
	      <view class="popup-mask" @click="closeRejectPopup"></view>
	      <view class="popup-content">
	        <view class="popup-header">
	          <text class="popup-title">选择原因，为您优化推荐</text>
	        </view>
	        <view class="reason-list">
	          <!-- 使用 v-for 渲染原因列表 -->
	         <view
	           class="reason-item"
	           v-for="(reason, index) in reasons"
	           :key="index"
	           @click="selectReason(reason)"
	         >
	          
	           <!-- 对象类型 -->
			   <view v-if="isObject(reason)" class="editable-reason">
	             <view class="reason-text">
	                <view class="reason-top">
						<text class="reason-title">{{ reason.title }}</text>
						<button
						  class="edit-button"
						  v-if="reason.editable"
						  @click.stop="editCustomReason(reason)"
						>
						  修改>
						</button>
					</view>
				    <text class="reason-content">{{ reason.content }}</text>
				</view>
	               
	             </view>
				 <!-- 字符串类型 -->
				 <text v-else>{{ reason }}</text>
	           </view>
	         </view>
	        </view>
	      </view>
    <!-- 聊天消息列表 -->
    <view class="message-list" :style="{ paddingBottom: inputBoxHeight + 'px' }">
      <!-- 求职信息卡片 -->
      <view class="job-card">
        <view class="job-header">
          <text class="job-title">{{ jobInfo.name }} {{ jobInfo.position }}</text>
          <text class="job-info">{{ jobInfo.experience }} {{ jobInfo.education }} {{ jobInfo.salary }} {{ jobInfo.age }}</text>
        </view>
        <view class="job-details">
          <text class="job-company">{{ jobInfo.company }} · {{ jobInfo.role }}</text>
          <text class="job-date">{{ jobInfo.date }}</text>
        </view>
        <text class="job-expectation">求职期望：{{ jobInfo.expectation }}</text>
        <view class="job-responsibilities">
          <text v-for="(resp, i) in jobInfo.responsibilities" :key="i" class="responsibility-item">
            {{ resp }}
          </text>
        </view>
      </view>

      <!-- 系统消息 -->
      <!-- <view class="message system">
        <text>系统：对方已同意您的面试邀请，请及时沟通。</text>
      </view> -->

      <view class="message-record">
		  <!-- 对方消息 -->
		  <view class="message other">
		    <view class="message-content">
		      <text>您好，我对贵公司的职位很感兴趣。</text>
		    </view>
		    <view class="message-time">10:00</view>
		  </view>
		  
		  <!-- 我的消息 -->
		  <view class="message me">
		    <view class="message-content">
		      <text>你好，看到您的简历，觉得蛮合适的，要聊一下吗？</text>
		    </view>
		    <view class="message-time">10:01</view>
		  </view>
	  </view>
    </view>

    <!-- 输入框 -->
    <view class="input-box" :style="{ bottom: inputBoxBottom + 'px' }">
      <view class="common-phrases" @click="togglePhrases">
        <text>常</text>
      </view>
      <input
        class="input"
        placeholder="回复消息"
        v-model="replyMessage"
        @focus="handleInputFocus"
        @blur="handleInputBlur"
      ></input>
      <!-- <button class="send-button" @click="sendMessage">发送</button> -->
    </view>

    <!-- 常用语列表 -->
    <view class="phrases-list" v-if="showPhrasesModal" :style="{ height: (showPhrasesModal ? (keyboardHeight > 0 ? keyboardHeight + 'px' : '328px') : '0'), bottom: phrasesListBottom + 'px' }">
      <view class="phrases-content">
		  <view class="phrase-item" >
		  	<text>常用语</text>
		  </view>
        <view class="phrase-item" v-for="(phrase, index) in phrases" :key="index">
          <text>{{ phrase }}</text>
          <button class="send-phrase-button" @click="sendPhrase(phrase)">发送</button>
        </view>
      </view>
      <view class="phrases-foot">
        <button class="add-button" @click="addPhrase">添加</button>
        <button class="manage-button" @click="managePhrases">管理</button>
      </view>
    </view>
  </view>
</template>

<script>
	import ContactPopup from '@/components/ContactPopup.vue'; // 引入自定义弹窗组件
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'; // 根据实际路径调整
export default {
	 components: {
	    ContactPopup,
		uniIcons,
	  },
  data() {
    return {
      replyMessage: '', // 输入框内容
      showPhrasesModal: false, // 是否显示常用语列表
      inputBoxBottom: 0, // 输入框距离底部的高度
      inputBoxHeight: 60, // 输入框的高度
      phrasesListBottom: 0, // 常用语列表距离底部的高度
      keyboardHeight: 0, // 键盘高度
      phrases: [
        '您好，请问什么时候方便面试？',
        '您的简历已通过初筛，请等待后续通知。',
        '感谢您的投递，我们会尽快联系您。'
      ], // 常用语列表
      jobInfo: {
        name: '李某某',
        position: 'Java工程师',
        experience: '3年',
        education: '本科',
        salary: '6-10k',
        age: '28岁',
        company: '佛山某某某有些公司',
        role: '工程师',
        date: '2020.01-2024-11',
        expectation: 'java',
        responsibilities: [
          '负责什么工作内容',
          '负责什么工作内容',
          '负责什么工作内容'
        ]
      },
	   showContactPopup: false ,// 控制弹窗显示
	   showRejectPopup: false, // 控制不合适原因弹窗显示
	         reasons: [
	           {
				   title: '礼貌通知对方', // 固定文本
				  content: '感谢您的应聘，但很遗憾，您的简历和该职位的需要不匹配...', // 可编辑文本
				  editable: true // 是否可编辑
				 },
	           '薪资不符',
	           '工作地点不符',
			   '技能不匹配',
	           '薪资不符',
	           '薪资不符',
	           '薪资不符',
	           '薪资不符',
	           '薪资不符',
	           '其他原因'
	         ], // 不合适原因列表
	         // selectedReason: '' // 选中的原因
    };
  },
  mounted() {
    // 监听键盘高度变化
    uni.onKeyboardHeightChange((res) => {
		console.log(res.height)
      this.keyboardHeight = res.height;
      this.adjustInputBoxPosition();
    });
  
    // 获取输入框高度
    const query = uni.createSelectorQuery().in(this);
    query.select('.input-box').boundingClientRect(res => {
      this.inputBoxHeight = res.height;
    }).exec();
  },
  methods: {
  // 调整输入框和常用语列表的位置
	 adjustInputBoxPosition() {
	   if (this.keyboardHeight > 0) {
	     // 键盘弹出时，输入框位于键盘上方
	     this.inputBoxBottom = this.keyboardHeight;
		 this.phrasesListBottom = this.keyboardHeight; // 常用语列表位于键盘上方
	     // this.phrasesListBottom = this.keyboardHeight + this.inputBoxHeight;
	   } else if (this.showPhrasesModal) {
	     // 常用语列表显示时，输入框位于常用语列表上方
	     this.inputBoxBottom = 328; // 输入框上移
	     this.phrasesListBottom = 0; // 常用语列表紧贴底部
	   } else {
	     // 默认情况下，输入框位于底部
	     this.inputBoxBottom = 0;
	     this.phrasesListBottom = 0;                                                             
	   }
	 },
	 
	 // 处理选项选择
	     handleContactSelect(action) {
	       if (action === '交换电话') {
	         uni.showToast({
	           title: '交换电话',
	           icon: 'none'
	         });
	       } else if (action === '交换微信') {
	         uni.showToast({
	           title: '交换微信',
	           icon: 'none'
	         });
	       }
	     },
	 
    // 约面试
    scheduleInterview() {
      uni.navigateTo({
        url: '/pages/enterprise/invitation'
      });
    },
    // 不合适
   /* rejectCandidate() {
      uni.showToast({
        title: '不合适',
        icon: 'none'
      });
    }, */
	isObject(value) {
	    return typeof value === 'object';
	  },
	 // 打开不合适原因弹窗
	     openRejectPopup() {
	       this.showRejectPopup = true;
	     },
	     // 关闭不合适原因弹窗
	     closeRejectPopup() {
	       this.showRejectPopup = false;
	     },
	      // 选择原因
	       selectReason(reason) {
	         if (typeof reason === 'object') {
	           console.log('选中原因:', reason.title, reason.content);
	         } else {
	           console.log('选中原因:', reason);
	         }
	       },
	     // 编辑自定义原因
	       editCustomReason(reason) {
	         uni.navigateTo({
	           url: '/pages/enterprise/set-reject-reply',
	           success: (res) => {
	             // 传递当前回复内容
	             res.eventChannel.emit('setRejectReply', {
	               title: reason.title,
	               content: reason.content
	             });
				 // 监听设置页面的返回数据
				 res.eventChannel.on('updateRejectReply', (data) => {
				   reason.content = data.content; // 更新内容
				 });
	           }
	         });
	       },
	     // 提交不合适原因
	     submitRejectReason(reason) {
	       if (reason) {
	         uni.showToast({
	           title: `已选择原因：${reason}`,
	           icon: 'none'
	         });
	         this.closeRejectPopup();
	       }
	     },
	
    // 发送消息
    sendMessage() {
      if (this.replyMessage.trim() === '') {
        uni.showToast({
          title: '消息不能为空',
          icon: 'none'
        });
        return;
      }
      console.log('发送消息：', this.replyMessage);
      this.replyMessage = '';
    },
    // 处理输入框聚焦事件
        handleInputFocus() {
          this.showPhrasesModal = false; // 输入框聚焦时隐藏常用语列表
          this.adjustInputBoxPosition();
        },
        // 处理输入框失焦事件
        handleInputBlur() {
          this.adjustInputBoxPosition();
        },
        // 切换常用语列表
        togglePhrases() {
          this.showPhrasesModal = !this.showPhrasesModal;
          this.adjustInputBoxPosition();
        },
        // 发送常用语
        sendPhrase(phrase) {
          this.replyMessage = phrase;
          this.sendMessage();
        },
        // 添加常用语
        addPhrase() {
           uni.navigateTo({
              url: '/pages/enterprise/add-phrase' // 跳转到添加常用语页面
            });
        },
        // 管理常用语
        managePhrases() {
          uni.navigateTo({
              url: '/pages/enterprise/manage-phrases' // 跳转到管理常用语页面
            });
        }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.user-info {
  padding: 20rpx;
  background-color: #fff;
  text-align: center;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
}

.action-top {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #fff;
}

.action-button {
  flex: 1;
  margin: 0 10rpx;
  padding: 15rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
   display: flex;
   line-height: 21px;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 居中对齐 */
    justify-content: center; /* 内容居中 */
}

.action-button::after{
	border: none;
}

.uni-icons{
	display: block;
	margin-bottom: 8rpx; /* 图标与文字的间距 */
}

.button-text {
  font-size: 24rpx; /* 调整文字大小 */
  color: inherit; /* 继承按钮的文字颜色 */
}

.reject-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  z-index: 999;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.popup-content {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 20rpx;
  box-sizing: border-box;
  z-index: 2;
  position: relative;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
  background-color: transparent;
  border: none;
}

.reason-list {
  max-height: 60vh;
  overflow-y: auto;
}

.reason-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.editable-reason {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.reason-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.reason-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.reason-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.reason-content {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.edit-button {
  font-size: 24rpx;
  color: #007AFF;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.edit-button::after{
	border:none;
}

.reason-item:last-child {
  border-bottom: none;
}

.message-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.job-card {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.job-header {
  margin-bottom: 10rpx;
}

.job-title {
  font-size: 32rpx;
  font-weight: bold;
}

.job-info {
  font-size: 28rpx;
  color: #666;
}

.job-details {
  margin-bottom: 10rpx;
}

.job-company {
  font-size: 28rpx;
  color: #333;
}

.job-date {
  font-size: 24rpx;
  color: #999;
}

.job-expectation {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.job-responsibilities {
  margin-left: 20rpx;
}

.responsibility-item {
  font-size: 28rpx;
  color: #666;
}

.message {
  margin-bottom: 20rpx;
}

.message.system {
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

.message-record{
	margin-top: 60rpx;
}

.message.other {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.message.me {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message-content {
  max-width: 70%;
  padding: 15rpx 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.message.other .message-content {
  background-color: #fff;
  color: #333;
}

.message.me .message-content {
  background-color: #2F318B;
  color: #fff;
}

.message-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}


.input-box {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #D1D3D9;
  border-top: 1rpx solid #e5e5e5;
  transition: bottom 0.3s;
  border-radius: 32px;
  margin-bottom: 20px;
}

.common-phrases {
	width: 24px;
height: 24px;
  font-size: 28rpx;
  color: #fff;
  margin-right: 20rpx;
  border-radius: 50%;
  background-color: #007aff;
  line-height: 24px;
  text-align: center;
}

.input {
  flex: 1;
  font-size: 28rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.send-button {
  padding: 15rpx 30rpx;
  font-size: 28rpx;
  color: #2F318B;
  background-color: #fff
}

.send-button::after {
	border: none;
}

.phrases-list {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  border-top: 1rpx solid #e5e5e5;
  padding: 20rpx;
  transition: bottom 0.3s, height 0.3s;
  overflow-y: auto; /* 允许滚动 */
}
.phrases-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}

.add-button, .manage-button {
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  color: #000;
  background-color: #f5f5f5
}

.add-button::after, .manage-button::after {
	border: none;
}

.phrases-content {
  max-height: 600rpx;
  overflow-y: auto;
}

.phrase-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34rpx 0;
  /* border-bottom: 1rpx solid #e5e5e5; */
}

.phrase-item text {
  font-size: 28rpx;
  flex: 1; /* 占据剩余空间 */
}

.send-phrase-button {
  color: #2F318B;
  font-family: "PingFang SC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  width: 51px;
  height: 23px;
  flex-shrink: 0;
  border-radius: 30px;
  border: 1px solid #2F318B;
  padding: 0;
  margin-left: 8px;
}
</style>